/* 1.引入创建上下文函数 */
import React, { Component ,createContext} from 'react';
/* 2.通过 createContext 创建上下文*/
let{
    Provider, //提供取值    
    Consumer //获取值
}=createContext()
class Tesing extends Component {
    render() {
        return (
            <div>
                <h1>Demo组件</h1>
                <Tesingchild></Tesingchild>
            </div>
        );
    }
}
class Tesingchild extends Component{
    render(){
        return <Consumer>
            {({...params})=>{
                console.log(params.msg)
                return <div>
                    <h1>Tesingchild组件{params.msg}</h1>
                    <button onClick={()=>{params.handleClick()}}>变牛</button>
                </div>
            }}
        </Consumer>
    }
}
class Cantanier extends Component{
    state={
        msg:"🐖"
    };
    handleClick=(params)=>{
        this.setState({
            msg:"🐂"
        })
    }
    render (){
        return(
            <div>
                <Provider value={{
                    msg:this.state.msg,
                    handleClick:this.handleClick
                }}>
                    <Tesing></Tesing>
                </Provider>
            </div>
        )
    }
}
export default Cantanier;